<template>
	<view class="comment">
		<view class="upload">
			<view v-for='(value,index) in formData.img' :key="index">
				<img  @click='shows(value)' :src="$imgUrl + value">
			</view>
			<view class="view" @click="Image">
				<image src="../../static/technician/71.png"></image>上传图片
			</view>
		</view>
		<textarea placeholder="请用简短的几句话描述一下对产品的使用情况吧!!!" v-model="formData.evaluate"></textarea>
		<p><span>综合评价</span><u-rate :count="count" v-model="formData.score"></u-rate></p>
		<button @click="submit">提交</button>
		<!-- 弹窗查看图片 -->
		<u-popup :show="show" mode="center" closeOnClickOverlay @close="close">
			<view class="popup">
				<img :src="$imgUrl+popup">
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				img: [],
				video: [],
				count: 5,
				value: 0,
				show: false,
				popup:{
					name:'',
					src:''
				},
				formData:{
					img:[],
					evaluate:"",
					score:"",
					order_sn:"",
				},
			};
		},
		methods: {
			shows(obj){
				this.show=true
				this.popup=obj
			},
			close() {
				this.show = false
			},
			Image() {
				uni.showLoading();
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						uni.uploadFile({
							url: that.$baseUrl + '/image/upload',
							filePath: res.tempFilePaths[0],
							name: 'image',
							header: {
								'token': uni.getStorageSync('userToken'),
								'token-type':0//0正常token验证1跳过验证
							},
							success: res => {
								let result = JSON.parse(res.data);
								that.formData.img.push(result.data);
							},
							complete:()=>{
								uni.hideLoading();
							}
						});
					}
				});
			},
			submit(){
				this.$httpRequest('/evaluate/evaluate', this.formData).then(res => {
					uni.showToast({
						title: '提交成功',
						duration: 2000
					});
					uni.switchTab({
						url:'/pages/order/order'
					});
				});
			},
		},
		onLoad(option) {
			this.formData.order_sn = option.order_sn;
		}
	}
</script>

<style lang="less">
	.comment {
		
		.popup{
			width: 600rpx;
			height: 600rpx;
			background: #fff;
			border-radius: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 10rpx;
			box-sizing: border-box;
			
			&>img{
				min-width: 100%;
				max-width: 100%;
				max-height: 100%;
			}
		}

		&>button {
			width: 690rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 24rpx;
			color: #fff;
			margin-top: 54rpx;
			background: #5FC07B;
			font-size: 15px;
		}

		&>p {
			padding-left: 30rpx;
			display: flex;
			font-size: 13px;
			color: #666;
		}

		&>textarea {
			font-size: 12px;
			background-color: #fff;
			padding: 20rpx 40rpx;
			width: 690rpx;
			height: 226rpx;
			box-sizing: border-box;
			border-radius: 10rpx;
			margin: 20rpx auto;
		}

		&>.upload {
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;

			&>view {
				width: 185rpx;
				height: 185rpx;
				border-radius: 5px;
				overflow: hidden;
				margin: 12rpx 20rpx;

				&>img {
					width: 100%;
					height: 100%;
				}
			}

			&>.view {
				width: 185rpx;
				height: 185rpx;
				border-radius: 5px;
				border: 1px dashed #BCBCBC;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				font-size: 12px;
				color: #9E9E9E;
				margin: 12rpx 20rpx;

				&>image {
					width: 40rpx;
					height: 36rpx;
					margin-bottom: 10rpx;
				}
			}
		}
	}
</style>